<template>
  <a-layout id="components-layout-demo-side" style="min-height: 100vh">
    <a-layout-sider v-model="collapsed" collapsible>
      <div class="logo">
        <div class="title">{{ title }}</div>
      </div>
      <a-menu theme="dark" mode="inline" :open-keys="openKeys" @openChange="onOpenChange">
        <a-menu-item key="1" disabled>
          <a-icon type="desktop" />
          <span>工作台</span>
        </a-menu-item>
        <a-sub-menu key="sub1" @click="handleClickArticle">
          <span slot="title">
            <a-icon type="folder-open" />
            <span>文章管理</span>
          </span>
          <a-menu-item key="addArticle">
            <a-icon type="file-add" />添加文章
          </a-menu-item>
          <a-menu-item key="articleList">
            <a-icon type="unordered-list" />文章列表
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2" @click="handleClickArticle">
          <span slot="title">
            <a-icon type="folder-open" />
            <span>随笔管理</span>
          </span>
          <a-menu-item key="essay">
            <a-icon type="edit" />新建随笔
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item @click="handleClickMessage">
          <a-icon type="message" />
          <span>留言管理</span>
        </a-menu-item>
        <a-menu-item @click="handleClickExit">
          <a-icon type="poweroff" />
          <span>退出登录</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout class="right">
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>后台管理系统</a-breadcrumb-item>
          <a-breadcrumb-item>工作台</a-breadcrumb-item>
        </a-breadcrumb>
        <div class="view">
          <router-view :key="key"></router-view>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  data() {
    return {
      collapsed: false,
      key: 1,
      title: "爱勇宝后台",
      rootSubmenuKeys: ["sub1", "sub2"],
      openKeys: ["sub1"],
    };
  },
  beforeUpdate() {
    if (this.collapsed) {
      this.title = "😜";
    } else {
      this.title = "爱勇宝后台";
    }
  },
  watch: {
    $route: function (newUrl, oldUrl) {
      this.key = new Date().getTime();
    },
  },
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    handleClickArticle(e) {
      if (e.key == "addArticle") {
        this.$router.push({ name: "AddArticle" });
      } else if (e.key == "articleList") {
        this.$router.push({ name: "ArticleList" });
      } else if (e.key == "essay") {
        this.$router.push({ name: "Essay" });
      }
    },
    handleClickMessage(e) {
      this.$router.push({ name: "Message" });
    },
    handleClickExit() {
      window.localStorage.removeItem("token");
      this.$router.push({ path: "/" });
    },
  },
};
</script>

<style lang="less">
.logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  .title {
    color: seashell;
    font-size: 1rem;
    letter-spacing: 2px;
  }
}
.right {
  // background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605370936106&di=63e03519be3900e5f90023bf2e61e978&imgtype=0&src=http%3A%2F%2Fdik.img.kttpdq.com%2Fpic%2F12%2F8367%2F8f6af1ca38f4a63c.jpeg") no-repeat center ;
  // background-size: 100% 100%;
}
.view {
  padding: 24px;
  // background: #95a5a6;
  background: rgba(255, 255, 255, 0.3);
  height: 100%;
}
</style>
